<template>
  <el-card shadow="never">
    <e-table
      ref="eTable"
      @getList="handleGetList"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :total="total"
    >
      <el-table-column label="总检查数" slot="check_count" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleDetail(scope.row, 'total')"
          >{{ scope.row.check_count }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="已收费数" slot="charge_cost" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleDetail(scope.row, 'have')"
          >{{ scope.row.charge_cost }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="未收费数" slot="no_charge_cost" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleDetail(scope.row, 'no')"
          >{{ scope.row.no_charge_cost }}</el-button>
        </template>
      </el-table-column>
    </e-table>
  </el-card>
</template>

<script>
import { getChkFeeMonitor } from '@/api/reports'
export default {
  data() {
    return {
      total: 1,
      loading: false,
      tableData: [],
      columns: [],
      queryParam: {
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  methods: {
    //columns 动态删减，根据form传递过来的数据
    async handleGetList(param = {}) {
      this.loading = true
      this.columns = [
        {
          slot: 'check_count'
        },
        {
          slot: 'charge_cost'
        },
        {
          slot: 'no_charge_cost'
        },
        {
          label: '未收费检查数占比',
          prop: 'no_charge_cost_rate',
          formatter: function(row, column, cellValue, index) {
            return row.no_charge_cost_rate ? row.no_charge_cost_rate + '%' : null
          }
        },
        {
          label: '应收总金额',
          prop: 'total_cost'
        },
        {
          label: '已收金额',
          prop: 'received_amount'
        },
        {
          label: '未收金额占比',
          prop: 'no_received_amount_rate',
          formatter: function(row, column, cellValue, index) {
            return row.no_received_amount_rate ? row.no_received_amount_rate + '%' : null
          }
        }
      ]
      this.queryParam = Object.assign(this.queryParam, param)

      if (this.queryParam.dateState) {
        this.columns.unshift({
          label: '日期',
          prop: 'dt'
        })
      }
      const res = await getChkFeeMonitor(this.queryParam)
      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    },
    handleDetail(row, type) {
      let param = null
      if (row.dt) {
        // 有账期的情况
        param = Object.assign({}, row)
      } else {
        param = Object.assign(this.queryParam, row)
      }
      console.log('param', param)

      this.$router.push({
        name: 'report11Detail',
        params: { detailRow: param, type }
      })
    }
  }
}
</script>
